<template>
  <div class="f-box">
    <div class="header">
      <label>新增博文</label>
    </div>
    <div class="form">
      <el-form ref="form" label-width="100px" label-position="left">
        <el-form-item label="文章标题">
          <el-input v-model="title"></el-input>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="keyword"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <!-- <div id="ueditor" type="text/plain"></div> -->
          <el-input v-model="content"></el-input>
        </el-form-item>
        <el-form-item label="文章类型">
          <el-select v-model="articleType" placeholder="请选择">
            <el-option v-for="item in typeList" :key="item.typeId" :label="item.typeName" :value="item.typeId">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="新增时间">
                    <el-input v-model="addTime" disabled></el-input>
                </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="back">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "createArticle",
  data() {
    return {
      title: "",
      keyword: "",
      ue: "",
      content: "",
      lastTime: "",
      addTime: "",
      articleId: "",
      dataObject: "",
      typeList: [],
      articleType: ""
    };
  },
  mounted() {
    this.getArticleType();
  },
  methods: {
    getArticleType() {
      request({
        url: "/api/article/getArticleTypeList",
        method: "post",
        data: {}
      }).then(res => {
        console.log(res);
        if (res.msg === "查询成功") {
          this.typeList = res.list;
        }
      });
    },
    onSubmit() {
      if (this.articleType) {
        // 根据类型ID 去查 类型名称
        request({
          url: "/api/article/getArticleTypeById",
          method: "post",
          data: {
            typeId: this.articleType
          }
        }).then(res => {
          console.log(res);
          if (res.msg === "查询成功") {
            this.articleTypeName = res.list[0].typeName;
            const params = {
              title: this.title,
              keyword: this.keyword,
              content: this.content,
              type_id: this.articleType,
              type_name: this.articleTypeName
            };
            request({
              url: "/api/article/createArticle",
              method: "post",
              data: params
            }).then(res => {
              console.log(res);
              if (res.msg === "新增成功") {
                this.$message({
                  message: "恭喜你，新增成功",
                  type: "success"
                });
                this.$router.push("/article-manager");
              }
            });
          }
        });
      }
    },
    back() {
      this.$router.push("/article-manager");
    }
  }
};
</script>
<style lang="scss" scoped>
.f-box {
  width: 100%;
  height: 700px;
  //   border: 1px solid #fff;
  margin: auto;
  .header {
    width: 50%;
    margin: auto;
    height: 50px;
    background: rgb(68, 114, 196);
    line-height: 50px;
    color: #fff;
    text-align: center;
    label {
      font-size: 16px;
    }
  }
  .form {
    width: 50%;

    margin: auto;
    margin-top: 20px;
  }
}
</style>
